<template>
  <div class="info-dialog" v-if="showD">
    <div class="content">
      <div class="content-t" :class="textC">
        {{text}}
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'msgPopup',
    data() {
      return {
        showD: false,
        text: '成功',
        textC: '',
      }
    },
    methods: {
      //正常
      succ(tx){
        this.showD = true
        this.text = tx
        setTimeout(()=>{
          this.showD = false
        }, 3000)
      },
      //错误
      error(tx){
        this.showD = true
        this.text = tx
        this.textC = 'error'
        setTimeout(()=>{
          this.showD = false
        }, 3000)
      },
      info(){
        this.showD = true
        this.text = tx
        this.textC = 'info'
        setTimeout(()=>{
          this.showD = false
        }, 3000)
      },

    }
  }
</script>

<style lang="scss">
  .info-dialog{
    @keyframes twinkling {
      /*rotate 旋转，scale缩放，translate移动，skew扭曲*/
      0% {
        opacity: 0.4;
        transform: scale(1);
      }
      50% {
        opacity: 0.8;
        transform: scale(1.11);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    .fadeIn{
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .content {
      position: absolute;
      top: 45%;
      left: 45%;
      z-index: 99;
      /*infinite 无限次播放动画 ease-in-out 低速开始以及结束*/
      animation: twinkling 0.5s 1 ease-in-out;
      .content-t{
        height : 50px;
        min-width: 100px;
        max-width: 400px;
        padding: 0 10px;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        font-weight: 400;
        color: #1d82f1;
        background:rgba(255,255,255,1);
        border: 1px solid #daecff;
        box-shadow:0px 6px 11px 1px rgba(0, 0, 0, 0.1);
        border-radius:10px;
      }
      .info{
        border: 1px solid #ffa201;
        color: #ffa201;
      }
      .error{
        border: 1px solid #ff594f;
        color: #ff594f;
      }
    }
  }

</style>
